<template>
  <div>
    <el-dialog
      title="修改轮播"
      :visible.sync="showDialog"
      ref="ForDat"
      :before-close="onClose"
    >
      <el-row>
        <el-form
          :model="formData"
          size="medium"
          label-width="80px"
          :rules="rules"
        >
          <el-row>
            <el-col :span="11">
              <el-form-item label="排序ID" prop="id"
                ><el-input
                  v-model="formData.id"
                  autocomplete="off"
                  :disabled="true"
                ></el-input
              ></el-form-item>
            </el-col>
            <el-col :span="10">
              <el-form-item label="图片" prop="imageUrl">
                <el-upload
                  class="avatar-uploader"
                  :auto-upload="false"
                  action="http://206.237.30.121:7800/uploadImage"
                  :show-file-list="false"
                  :on-change="keyChangeHandle"
                >
                  <img
                    v-if="dialogImageUrl"
                    :src="dialogImageUrl"
                    class="banners"
                  />
                  <i v-else class="el-icon-plus bannerimg"></i>
                </el-upload>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="11">
              <el-form-item label="标题" prop="title"
                ><el-input
                  v-model="formData.title"
                  autocomplete="off"
                ></el-input
              ></el-form-item>
            </el-col>
            <el-col :span="11">
              <el-form-item label="链接" prop="linkUrl"
                ><el-input
                  v-model="formData.linkUrl"
                  autocomplete="off"
                ></el-input
              ></el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="11">
              <el-form-item label="排序" prop="orderPriority"
                ><el-input
                  v-model="formData.orderPriority"
                  autocomplete="off"
                ></el-input
              ></el-form-item>
            </el-col>
            <el-col :span="11">
              <el-form-item label="描述" prop="description"
                ><el-input
                  v-model="formData.description"
                  autocomplete="off"
                ></el-input
              ></el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </el-row>
      <div slot="footer">
        <el-button @click="close">退出</el-button>
        <el-button type="primary" @click="handelConfirm">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { update } from "@/api/banner";
export default {
  props: {
    alid: Number,
  },
  data() {
    return {
      formData: {},
      rules: {},
      showDialog: false,
      dialogVisible: false,
      dialogImageUrl: "",
      uploadFileList: [],
    };
  },
  mounted() {},
  methods: {
    async handelConfirm() {
      const param = {
        description: this.formData.description,
        id: this.formData.id,
        imageUrl: this.formData.imageUrl,
        linkUrl: this.formData.linkUrl,
        orderPriority: this.formData.orderPriority,
        title: this.formData.title,
      };
      const res = await update(param);
      if (res.code == 200) {
        this.$message({
          message: "修改成功",
          type: "success",
        });
      } else {
        this.$message({
          type: "error",
          message: res.message,
        });
      }
    },
    keyChangeHandle(file) {
      this.formData.imageUrl= URL.createObjectURL(file.raw);
      // this.form.legendFile = file.raw;
      this.$refs.ForDat.validateField("imageUrl")

    },

    onClose() {
      this.close();
    },
    close() {
      this.showDialog = false;
    },
  },
};
</script>

<style>
.avatar-uploader {
  background-color: #fbfdff;
  border: 1px dashed #c0ccda;
  border-radius: 6px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  width: 100px;
  height: 100px;
  line-height: 100px;
  vertical-align: top;
  text-align: center;
}
.bannerimg {
  font-size: 3rem;
  line-height: 2;
  color: #bbb6b6;
  display: flex;
  align-items: center;
  text-align: center;
}
.banners{
 width: 100px;
  height: 100px;
  line-height: 100px;
}
</style>